<template>
  <div>
    <el-container>
      <el-header class="primaryColor">
        <el-button icon="el-icon-s-fold" @click="inshow"></el-button>
        
        <span class="span">后台管理系统</span>

        <!-- 点击变色 -->
        <thema class="primaryColor " id="main"/>

        <!-- 点击全屏 -->
        <div class="div_right">
          <el-button icon="el-icon-full-screen" @click="big"></el-button>
        </div>
        <!-- 图片 -->
        <div class="div_img">
          <img style="width: 50px; height: 50px" src="../../public/5.png" />
        </div>
        <!-- 下拉菜单 -->
        <el-dropdown class="div_bottom">
          <span class="el-dropdown-link">
            admin<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-button @click="edit_login">退出登录</el-button>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>

      <!-- 头部 -->
      <heade />
      <!-- 左边 -->
      <left />
    </el-container>
  </div>
</template>

<script>
import left from "../components/left"; //左侧导航栏
// import heade from "../components/heade"; //头部
import screenfull from "screenfull"; //全屏
import thema from "../components/common/theme"; //切换主体颜色
 
export default {
  components: {
    left,
    thema,
  },

  methods: {
    inshow() {
      this.$store.commit("inshow");
    },
    //全屏
    big() {
      screenfull.toggle();
    },
    //退出登录
    edit_login() {
      localStorage.removeItem("token");
      this.$router.push({ path: "/" });
    },
  },
};
</script>

<style lang="scss">
.header {
  width: 100%;
  height: 50px;
  // background:lightseagreen;
  line-height: 60px;
  display: flex;
}
.div_right {
  margin-left: 900px;
  margin-top: 10px;
}
.div_img {
  margin-left: 10px;
  margin-top: 5px;
  img {
    border-radius: 30px;
  }
}
.div_bottom {
  margin-left: 10px;
  margin-top: 20px;
}
.primaryColor {
  height: 800px;
  display: flex;
  .span {
    margin-left: 20px;
    margin-top: 15px;
    font-size: 20px;
    display: inline-block;
    width: 200px; 
  }
}
#main{
  padding-top: 10px;
}
</style>
